<template>
	<view>
		<navBar title="我的卡券"></navBar>
		<view class="top-bg"></view>
		<view class="content">
			<view class="tab">
				<view class="tab-item" :class="{'active':query.isEffective===1}" @click="handleTab(1)">
					<view>未使用</view>
					<view class="line"></view>
				</view>
				<view class="tab-item" :class="{'active':query.isEffective===0}" @click="handleTab(0)">
					<view>已过期</view>
					<view class="line"></view>
				</view>
			</view>
			<view v-if="list.length">
				<view class="coupon" :class="{'expired':query.isEffective===0}" v-for="(item,index) in list" :key="index" @click="go('/pages/indoor/parkingRecords')">
					<image class="coupon-bg" v-if="query.isEffective===1" :src="bg_image.couponBgActive"></image>
					<image class="coupon-bg" v-else :src="bg_image.couponBg"></image>
					<view class="info active">
						<view class="info-left">
							<text>￥</text>
							<text class="ft84">{{item.couponMoney || 0}}</text>
						</view>
						<view class="info-right">
							<view>{{item.useType===1?'停车费抵扣红包':'月卡费用抵扣红包'}}</view>
							<view class="time">有效期至：{{item.endDate || ''}}</view>
							<view class="tip text-part">{{item.departmentName}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="page-result" v-else>
				<image class="page-result-icon" :src="bg_image.emptyData"></image>
				<view class="page-result-msg">暂无数据</view>
			</view>
			<uni-load-more v-if="list.length" :status="status" :content-text="contentText"
				@clickLoadMore="clickLoadMore" />
		</view>
	</view>
</template>

<script>
	import myCoupon from './js/myCoupon'
	
	import uniLoadMore from './components/uni-load-more/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
		   uniLoadMore
		},
		...myCoupon 
	}
</script>

<style lang="less" scoped>
	@import url('./css/myCoupon.less');
</style>